<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>设备列表（新增设备）</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../css/public.css" media="all" />
  </head>
  <style>
    .layui-input {
      width: 95%;
    }
    .xm-select-demo {
      width: 95%;
      /* position: fixed; */
    }
    .layui-btn-red {
      background-color: red;
    }
    .layui-btn-Tangerine {
      background-color: chocolate;
    }
    #demo1 {
      position: fixed;
      width: 38vh;
    }
    .layui-btn-danger2 {
      background-color: #191970c9;
    }
    .layui-btn-Msg {
      background-color: #8d4eeee3;
    }
  </style>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!-- <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">设备名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">设备编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sex" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">网关编号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit  lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset> -->
        <div id="Myloading">
          <img
            src="../lib/layui-v2.5.5/css/modules/layer/default/loading-01.gif"
            alt=""
          />
        </div>
        <script type="text/html" id="toolbarDemo">
          <div style="color:#666; position: absolute;margin-left: 7%;">
            {{d.where.name}}
          </div>
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add">
              新增设备
            </button>
            <!-- <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除设备 </button> -->
          </div>
        </script>

        <table
          class="layui-hide"
          id="HcurrentTableId"
          lay-filter="currentTableFilter"
        ></table>

        <script type="text/html" id="currentTableBar">
          <a
            class="layui-btn layui-btn-xs data-count-edit"
            data-title="终端列表"
            layuimini-content-href="page/Hterminal.html"
            lay-event="edit"
            >终端</a
          >
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-danger"
            data-title="报警事项"
            layuimini-content-href="page/table/HalarmList.html"
            lay-event="alarm"
            >报警</a
          >
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-Msg"
            data-title="线缆局放"
            layuimini-content-href="page/troublePoint.html"
            lay-event="cable"
            >线缆</a
          >
          <!-- <a class="layui-btn layui-btn-xs data-count-edit layui-btn-danger2"   data-title="评分报告" layuimini-content-href="page/report/check_report.html" lay-event="alarm2">诊断</a> -->
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-Tangerine"
            lay-event="rename_device"
            >重命名</a
          >
          <a
            class="layui-btn layui-btn-xs data-count-edit layui-btn-red"
            lay-event="delete"
            >删除</a
          >
        </script>
      </div>
    </div>
    <script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../js/xm-select.js" charset="utf-8"></script>
    <script>
      layui.use(["form", "table", "miniTab"], function () {
        // 2020-03-25 HF sessionStorage中取出数据
        var token = sessionStorage.getItem("newtoken");
        // var station =JSON.parse(sessionStorage.getItem('SaveStation'));
        var getMap = sessionStorage.getItem("HSvaeMap");

        var $ = layui.jquery,
          form = layui.form,
          miniTab = layui.miniTab,
          table = layui.table;
        miniTab.listen();
        $("#Myloading").remove();

        if (getMap === "888") {
          var getMapCode = sessionStorage.getItem("HSvaeMapCode");
          var getMapText = sessionStorage.getItem("HSvaeMapText");
          getDevices(getMapCode, getMapText);
        } else {
          var station = JSON.parse(sessionStorage.getItem("SaveStation"));
          var stationCode = station.stationCode;
          var stationName = station.text;
          getDevices(stationCode, stationName);
        }

        function getDevices(stationCode, stationName) {
          table.render({
            elem: "#HcurrentTableId",
            // url: '../api/ceshi.json',
            url:
              "/oms-web/devices/getdevicespage?stationCode=" +
              stationCode +
              "&token=" +
              token,
            toolbar: "#toolbarDemo",
            parseData: function (res) {
              //res 即为原始返回的数据
              return {
                code: res.code, //解析接口状态
                msg: res.msg, //解析提示文本
                count: res.data.total, //解析数据长度
                data: res.data.list, //解析数据列表
              };
            },
            where: { name: stationName },
            defaultToolbar: [
              "filter",
              "exports",
              "print",
              {
                title: "提示",
                layEvent: "LAYTABLE_TIPS",
                icon: "layui-icon-tips",
              },
            ],
            cols: [
              [
                { type: "numbers", width: 120, title: "序号", align: "center" },
                //复选框 {type: "checkbox", width: 50, fixed: "left"},
                {
                  field: "text",
                  minWidth: 110,
                  title: "设备名称",
                  align: "center",
                },
                // return "   <input type='checkbox'  menuId = '" + menuId + "'  lay-filter='state' lay-skin='switch' lay-text='ON|OFF'>"
                // {field: 'deviceCode', width: 280, title: '设备编号', align: "center"},
                {
                  field: "deviceType",
                  width: 350,
                  title: "设备类型",
                  align: "center",
                  templet: function (res) {
                    return res.typeText;
                  },
                },
                {
                  title: "操作",
                  width: 300,
                  templet: "#currentTableBar",
                  fixed: "right",
                  align: "center",
                },
              ],
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            done: function (res) {
              if (res.code == -1) {
                window.location = "./login-1.html";
              }
              //表格渲染完成回调
              $("#Myloading").remove();
              // 删除标识
              sessionStorage.removeItem("HSvaeMap");
              sessionStorage.removeItem("HSvaeMapCode");
              sessionStorage.removeItem("HSvaeMapText");
            },
          });
        }

        // 监听搜索操作
        form.on("submit(data-search-btn)", function (data) {
          var result = JSON.stringify(data.field);
          layer.alert(result, {
            title: "最终的搜索信息",
          });

          //执行搜索重载
          table.reload(
            "currentTableId",
            {
              page: {
                curr: 1,
              },
              where: {
                searchParams: result,
              },
            },
            "data"
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on("toolbar(currentTableFilter)", function (obj) {
          if (obj.event === "add") {
            // 监听添加操作
            /*********设备类型列表***************/
            $.ajax({
              url: "/oms-web/types/deviceTypes?token=" + token,
              dataType: "json",
              type: "get",
              // async:false,
              contentType: "application/json",
              success: function (data) {
                if (data.code == -1) {
                  window.location = "./login-1.html";
                }
                var device_arr = [];
                for (let i = 0; i < data.data.length; i++) {
                  var device_list = {};
                  device_list.name = data.data[i].text;
                  device_list.value = data.data[i].typo;
                  device_arr.push(device_list);
                }
                demo1.update({
                  data: device_arr,
                  autoRow: true,
                });
              },
              error: function () {
                layer.msg("数据请求错误！");
                layer.close(index);
              },
            });

            /*********弹出框***************/
            var index = layer.open({
              title: "新增设备",
              type: 1,
              shade: 0.2,
              offset: ["100px"],
              resize: false,
              // maxmin:true,
              shadeClose: true,
              skin: "layui-layer-molv",
              area: ["350px", "290px"],
              content:
                '<div style="margin-top:20px;"><p style="margin-bottom: 15px;margin-left: 5px;">设备名称: </p><input AUTOCOMPLETE="off" type="text" name="new_device" lay-verify="required" lay-reqtext="当前站点不能为空" placeholder="请输入设备名称" class="layui-input"><p style="margin-top: 15px;margin-bottom: 15px;margin-left: 5px;">设备类型: </p></div><div id="demo1" class="xm-select-demo"></div>',
              btn: ["确认"],
              yes: function (index, layero) {
                var device_name = $("input[name=new_device]")
                  .val()
                  .trim()
                  .replace(/\s/g, ""); //获取多行文本框的值
                var device_down_type = demo1.getValue();
                // *************新增设备接口*******************//
                layer.confirm(
                  "确定新增该设备吗？",
                  {
                    btn: ["确定", "取消"], //按钮
                  },
                  function () {
                    $.ajax({
                      url:
                        "/oms-web/devices/devices?token=" +
                        token +
                        "&deviceName=" +
                        device_name +
                        "&stationCode=" +
                        station.stationCode +
                        "&type=" +
                        device_down_type[0].value,
                      dataType: "json",
                      type: "post",
                      contentType: "application/json",
                      success: function (data) {
                        if (data.code == -1) {
                          window.location = "./login-1.html";
                        }
                        if (data.code === 0) {
                          layer.close(index);
                          layer.msg(
                            "新增成功",
                            { icon: 1, time: 1000 },
                            function () {
                              window.location.reload();
                            }
                          );
                        } else {
                          layer.close(index);
                          layer.msg(data.msg, { icon: 1, time: 1000 });
                        }
                      },
                      error: function () {
                        layer.msg("数据请求错误！");
                        layer.close(index);
                      },
                    });
                  }
                );
              },
            });
          } else if (obj.event === "delete") {
            // 监听删除操作
            var checkStatus = table.checkStatus("currentTableId"),
              data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          }
          /************设备类型下拉****************/
          var demo1 = xmSelect.render({
            el: "#demo1",
            radio: true,
            direction: "down",
            clickClose: true,
            // toolbar: {show: true},
            data: [],
          });
        });

        //监听表格复选框选择
        table.on("checkbox(currentTableFilter)", function (obj) {
          console.log(obj);
        });

        table.on("tool(currentTableFilter)", function (obj) {
          // 2020-03-25 HF 保存接口所需参数
          var device = obj.data;
          sessionStorage.setItem("Savedevice", JSON.stringify(device));
          if (obj.event === "alarm2") {
            sessionStorage.setItem("HsaveReport_code", obj.data.deviceCode);
          } else if (obj.event === "alarm") {
            var alarmRequest = {
              Req: 2,
              deviceCode: obj.data.deviceCode,
            };

            sessionStorage.setItem("SaveRequest", JSON.stringify(alarmRequest));
            // layer.confirm('真的删除行么', function (index) {
            //     obj.del();
            //     layer.close(index);
            // });
          } else if (obj.event === "delete") {
            //删除设备
            var device_code = obj.data.deviceCode;
            layer.confirm(
              "确定删除该设备吗？",
              {
                btn: ["确定", "取消"], //按钮
              },
              function () {
                $.ajax({
                  url:
                    "/oms-web/devices/deletedevice/?token=" +
                    token +
                    "&deviceCode=" +
                    device_code,
                  dataType: "json",
                  type: "post",
                  contentType: "application/json",
                  success: function (data) {
                    if (data.code == -1) {
                      window.location = "./login-1.html";
                    }
                    if (data.code === 0) {
                      layer.closeAll();
                      layer.msg(
                        "删除成功！",
                        { icon: 1, time: 1000 },
                        function () {
                          window.location.reload();
                        }
                      );
                    } else {
                      layer.closeAll();
                      layer.msg(data.msg, { icon: 2, time: 1000 });
                    }
                  },
                  error: function () {
                    layer.msg("数据请求错误！");
                    layer.closeAll();
                  },
                });
              }
            );
          } else if (obj.event === "rename_device") {
            var index = layer.open({
              title: "重命名设备",
              type: 1,
              shade: 0.2,
              // maxmin:true,
              shadeClose: true,
              offset: ["150px"],
              skin: "layui-layer-molv",
              area: ["350px", "200px"],
              content:
                '<div style="margin-top:20px;"><p style="margin-bottom: 15px;margin-left: 5px;">新设备名称：</p><input AUTOCOMPLETE="off" type="text" name="rename_device" lay-verify="required" lay-reqtext="当前站点不能为空" value="' +
                obj.data.text +
                '"  class="layui-input"></div>',
              btn: ["确认"],
              yes: function (index, layero) {
                var device_name = $("input[name=rename_device]")
                  .val()
                  .trim()
                  .replace(/\s/g, ""); //获取多行文本框的值
                // 检测是否名字重复
                if (obj.data.text == device_name) {
                  layer.msg("重命名重复！");
                  return;
                }
                // *************新增站点接口*******************//
                layer.confirm(
                  "确定修改该设备名吗？",
                  {
                    btn: ["确定", "取消"], //按钮
                  },
                  function () {
                    $.ajax({
                      url:
                        "/oms-web/devices/rename-device?token=" +
                        token +
                        "&deviceName=" +
                        device_name +
                        "&code=" +
                        obj.data.deviceCode,
                      dataType: "json",
                      type: "post",
                      contentType: "application/json",
                      success: function (data) {
                        if (data.code == -1) {
                          window.location = "./login-1.html";
                        }
                        if (data.code === 0) {
                          layer.close(index);
                          layer.msg(
                            "修改成功！",
                            { icon: 1, time: 1000 },
                            function () {
                              window.location.reload();
                            }
                          );
                        } else {
                          layer.close(index);
                          layer.msg(data.msg, { icon: 1, time: 1000 });
                        }
                      },
                      error: function () {
                        layer.msg("数据请求错误！");
                        layer.close(index);
                      },
                    });
                  }
                );
              },
            });
          }
        });
      });
    </script>
  </body>
</html>
